<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
    <style  type="text/css">
         *{
            padding: 0;
            margin: 0;
        }
        .wai{
            margin: auto;
            width: 400px;
        }
        .table1{
            width: 400px;
            height: 300px;
        }
        .an1{
            width: 260px;
            margin-top: 10px;
        }
        .xt:hover{
            background-color: rgb(169, 169, 169);
        }

    </style>
</head>
<body>
    <div class="wai">
        <form id="login">
            <table class="table1">
                <tr>
                    <td>学号：</td>
                    <td><input class="xt" type="text" autofocus></td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td><input class="xt" type="text"></td>
                </tr>
                <tr>
                    <td>班级：</td>
                    <td><input class="xt" type="text"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
                    </td>
                </tr>
                <tr>
                    <td>生日：</td>
                    <td><input class="xt" type="text" value="年/月/日"></td>
                </tr>
                <tr>
                    <td>邮箱：</td>
                    <td><input class="xt" id="email" type="text"></td>
                </tr>
                <tr>
                    <td>主页：</td>
                    <td><input class="xt" id="wang" type="text"></td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox">体育<input type="checkbox" checked="checked">音乐<input type="checkbox">代码
                    </td>
                </tr>
            </table> 
        </form>

        <input class="an1" onclick="tijiao();" id="submit" type="submit"/>
        <input class="an1" onclick="chongz();" id="reset" type="reset"/>
    </div>

    <script type="text/javascript">

        function tijiao(){
            document.getElementById('login').submit();
        }

        function chongz(){
            document.getElementById('login').reset();
        }
    
    email.onchange = function(){
		var email = this.value;
		var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if(reg.test(email)){
			alert("邮箱格式正确");
		}else{
			alert("邮箱格式不正确");
		}
	}    

    wang.onchange = function(){
		var wang = this.value;
        //校验http[s]：//www.aaa.com类型的网址
		var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
		if(reg.test(wang)){
			alert("主页格式正确");
		}else{
			alert("主页格式不正确");
		}
	}
    </script> 
    
</body>
</html>